<template>

    <el-container class="home-container" direction="vertical">
        <el-header>
            <div>
                <div>
                    <img src="" alt="">
                    <i class="el-icon-reading"></i>
                    <span>二叉树屋</span>
                </div>
                
                <div>
                </div>
                <el-menu :default-active="activeIndex" class="el-menu-demo" router mode="horizontal" @select="handleSelect">
                    <el-menu-item index="page">首页</el-menu-item>
                    <el-menu-item index="talk">论坛</el-menu-item>
                    <el-menu-item index="upload">上传资源</el-menu-item>
                    <el-menu-item index="parnter">合作中心</el-menu-item>     
                </el-menu>
            </div>
            <el-avatar v-if="session" class="avater" :size="50" src="https://empty" @error="errorHandler">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3435185910,2509985586&fm=26&gp=0.jpg"/>
                
            </el-avatar>
            <el-button class="btn02" v-if="session" :plain="true" @click="backlogin">退出</el-button>
            <el-button class="btn01" v-else :plain="true" @click="login">登录</el-button>
        </el-header>

        <el-container>
            <el-main>
                <router-view></router-view>
            </el-main>
       
        </el-container>
        
    </el-container>
</template>
<script>


    export default{
        data() {
            return {
                booklist:[],
                activePath:'login/',
                session:''
                }
        },
        created() {
            this.getData()
            this.session =  window.sessionStorage.getItem("token");
        },
        methods: {
            async getData(){
                const {data:res} = await this.$http.get('page/')
                this.booklist = res
            },
           
            handleOpen(){

            },
            handleClose(){

            },
            toggleCollapse(){
                //点击按钮进行折叠和展开
                this.isCollapse = !this.isCollapse
            },
            login(){
                // this.loginDialogVisible = true
                this.$router.push('/login')  
            },
            backlogin(){
                window.sessionStorage.clear();
                this.$router.push('/page')
                location.reload();
            }
    }
}
</script>

<style lang="less" scoped>

.home-container{
    height: 100%;
}

.el-header{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: black;
    font-size: 25px;
    height: 60px !important;
    padding-left: 40px;
    > div{
        display: flex;
        align-item:center;
        span{
            margin-left:10px;
        }
    }
    
    
    
}


.el-main{
    background-color: #F5F7FA;
}

.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 80%;
    display: block;
    margin-left: 10%;
    margin-top: 8px;
    border-radius: 10px;
    height: 150px;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .el-aside{
    width: 142px ;
  }

  .el-card{
      width: 220px;
      height: 245px;
      margin: 20px;
  }
  .toggle-button{
    background-color: #4A5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}

.el-footer{
    height: 100px !important;
}
.avater{
    display: flex;
    margin-left: 720px;
}

.btn01 .btn02{
    display: flex;
    margin-right: 100px;
}
</style>